<template>
    <div>
        <!--轮播图-->
        <swiper :lunbotuArr="lunbotuArr" :isfull="true"></swiper>

        <!--九宫格-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newslist">
                    <img src="../../images/news.png" alt="">
                    <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/photoslist">
                    <img src="../../images/pic.png" alt="">
                    <div class="mui-media-body">图片分享</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/goodslist">
                    <img src="../../images/shoppingCar.png" alt="">
                    <div class="mui-media-body">商品购买</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/note.png" alt="">
                <div class="mui-media-body">留言反馈</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/video.png" alt="">
                <div class="mui-media-body">视频专区</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/link.png" alt="">
                <div class="mui-media-body">联系我们</div>
            </a></li>
        </ul>


        <h3>HomeContainer</h3>
    </div>
</template>

<script>
    /*接收自定义的数据*/
    import {imgList} from '../../data.js'
    import {Toast} from 'mint-ui'
    import swiper from '../subcomponents/Swiper.vue'

    export default {
        name: "HomeContainer",
        data() {
            return {
                lunbotuArr: [] // 保存轮播图的数组
            }
        },
        created() {
            this.getLunbotu();
        },
        methods: {
            getLunbotu() { // 获取轮播图数据的方法
                this.lunbotuArr = imgList.message;
                Toast({
                    message: '加载成功！',
                    duration: 800
                });
            }
        },
        components: {
            swiper: swiper
        }
    }
</script>

<style lang="scss" scoped>


    .mui-grid-view.mui-grid-9 {
        background-color: #FFF;
        border: none;
        .mui-table-view-cell {
            border: 0;
        }
        img {
            width: 45px;
            height: 45px;
        }
        .mui-media-body {
            font-size: 14px;
        }
    }
</style>